import { defineComponent, ref, watch, onMounted, nextTick } from 'vue';
import SvgIcon from '@/components/svg-icon';
import _ from 'lodash-es';
import { ElTabs, ElTabPane, ElButton } from 'element-plus';
import $style from './index.module.scss';

export default defineComponent({
    setup() {
        /**
         * @description innerTabs - 查找
         * @type { array }
         */
        const searchTabsToolList = [
            {
                svgIcon: 'database-save',
                label: '保存',
            },
            {
                svgIcon: 'database-query-creation-tool',
                label: '查询创建工具',
            },
            {
                svgIcon: 'database-beautify-sql',
                label: '美化SQL',
            },
            {
                svgIcon: 'database-code',
                label: '代码段',
            },
        ];

        /**
         * @description innerTabs - 视图
         * @type { array }
         */
        const viewTabsToolList = [
            {
                svgIcon: 'database-save',
                label: '保存',
            },
            {
                svgIcon: 'database-query-creation-tool',
                label: '视图创建工具',
            },
            {
                svgIcon: 'database-beautify-sql',
                label: '美化SQL',
            },
        ];

        /**
         * @description innerTabs - 表
         * @type { array }
         */
        const tableToolList = [
            {
                svgIcon: 'database-start-transaction',
                label: '开始事务',
            },
            {
                svgIcon: 'database-text',
                label: '文本',
            },
            {
                svgIcon: 'database-screen',
                label: '筛选',
            },
            {
                svgIcon: 'database-sort',
                label: '排序',
            },
            {
                svgIcon: 'database-import',
                label: '导入',
            },
            {
                svgIcon: 'database-export',
                label: '导出',
            },
        ];

        /**
         * @description innerTabs - 表
         * @type { array }
         */
        const userToolList = [
            {
                svgIcon: 'database-edit-user',
                label: '编辑用户',
            },
            {
                svgIcon: 'database-new-user',
                label: '新建用户',
            },
            {
                svgIcon: 'database-del-user',
                label: '删除用户',
            },
            {
                svgIcon: 'database-permission-administrator',
                label: '权限管理员',
            },
        ];


        /**
         * @description  对象
         * @type { array }
         */
        const objectToolList = [
            {
                svgIcon: 'database-open-table',
                label: '打开表',
            },
            {
                svgIcon: 'database-new-table',
                label: '新建表',
            },
            {
                svgIcon: 'database-design-table',
                label: '设计表',
            },
            {
                svgIcon: 'database-delete-table',
                label: '删除表',
            },
            {
                svgIcon: 'database-export-wizard',
                label: '导出向导',
            },
            {
                svgIcon: 'database-import-wizard',
                label: '导入向导',
            },
        ];

        /**
         * @description 外层 tabs 的值
         * @type { string }
         */
        const tabsValue = ref('object');

        /**
         * @description 内层 tabs 的值
         * @type { string }
         */
        const innerTabsValue = ref(undefined);

        /**
         * @description 内层 tabs 的 ref
         * @type { string }
         */
        const innerTabsRef = ref(null);

        /**
         * @description 监听外层 tabs 变化，修改内层 tabs 的值
         */
        watch(() => tabsValue.value, (val) => {
            if (val === 'object') {
                innerTabsValue.value = ''
            }
        });

        /**
         * @description 移除 tab 的事件
         */
        const handleRemoveTab = () => { };

        /**
         * @description 挂载完成
         */
        onMounted(() => {
            /* 阻止点击事件冒泡 */
            nextTick(() => {
                _.forEach(['.el-tabs__nav-prev', '.el-tabs__nav-next'], selector => {
                    innerTabsRef.value.querySelector(selector).onclick = e => e.stopPropagation();
                });
            })
        });

        const tabsRender = () => {
            return <ElTabs type="border-card" v-model={tabsValue.value} >
                <ElTabPane label="对象" name="object"></ElTabPane>
                <ElTabPane name="inner">
                    {{
                        label: () => {
                            return <ElTabs
                                type="card"
                                closable
                                stretch
                                ref={innerTabsRef}
                                class={$style.innerTabs}
                                v-model={innerTabsValue.value}
                                onTabRemove={handleRemoveTab}>
                                {
                                    _.map([1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => <ElTabPane name={item}>{{
                                        label: () => <span class={$style.innerTabLabel}>
                                            <SvgIcon name="database-search" />
                                            <em>未命名* 查找</em>
                                        </span>
                                    }}</ElTabPane>)
                                }
                            </ElTabs>
                        }
                    }}
                </ElTabPane>
            </ElTabs>
        };

        const contentRender = () => {
            return <section class={$style.toolList}>
                {/* tool list */}
                {_.map(tabsValue.value === 'inner' ? userToolList : objectToolList, item => <ElButton title={item.label}>
                    <SvgIcon name={item.svgIcon} />
                    <span>{item.label}</span>
                </ElButton>)}
            </section>
        };

        return () => (<div class={$style.workspaceHeader}>
            {/* tabs */}
            {tabsRender()}
            {contentRender()}
        </div>)
    }
})